<template>
	<view :class="['xl-checkbox-container', direction == 'row' ? 'items-row' : 'items-column']">
		<view :class="['xl-checkbox-item',{'underline': underline}]" v-for="(item,index) in items" :key="index" @click="chooseItem(item)">
			<view :class="['xl-checkbox-item-info', {'xl-checkbox-item-checked': isChecked(item), 'xl-checkbox-icon-disabled': props.disabled || item.disabled, 'xl-checkbox-item-bg': showBackground}]" 
				:style="{'--gap':$xl.parseUnit(gap, 'rpx'), '--icon-size': $xl.calcUnit(iconSize, 'rpx'), '--bg-color': $xl.color.colorToRgba(iconColor, 0.2)}">
				<view class="xl-checkbox-icon">
					<!-- #ifdef MP-WEIXIN -->
					<xl-icon class="yes" name="xl-yes" color="#fff" :size="iconSize*2/5" top="-1"></xl-icon>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<xl-icon class="yes" name="xl-yes" color="#fff" :size="iconSize*2/5"></xl-icon>
					<!-- #endif -->
				</view>
				<view class="xl-checkbox-text" :style="{fontSize: $xl.parseUnit(fontSize, 'rpx')}">
					{{typeof item === 'string' ? item : item[labelName]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['update:modelValue', 'change'])
	
	// 双向绑定值，让v-model绑定的值双向变化
	const checkedValue = ref([])
	
	watch(() => props.modelValue, (newValue, oldValue) => {
		checkedValue.value = newValue
	},{immediate: true})
	
	function isChecked(item){
		if (typeof item === 'string') return checkedValue.value.includes(item)
		else return checkedValue.value.includes(item[props.valueName])
	}
	
	function chooseItem(item) {	
		if (props.disabled || item.disabled) return;
		
		let choose = null
		if (typeof item === 'string') choose = item
		else choose = item[props.valueName]
		
		if(checkedValue.value.includes(choose)) checkedValue.value = checkedValue.value.filter(item => item !== choose);
		else checkedValue.value.push(choose)
		
		emits('update:modelValue', checkedValue.value);
		emits('change', checkedValue.value);
	}
</script>

<style lang="scss" scoped>
	.xl-checkbox-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		&.items-row{
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		&.items-column{
			flex-direction: column;
		}
		
		.xl-checkbox-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;

			&.underline {
				padding: 12rpx 0;
				border-bottom: 1rpx solid #e4e4e4;
			}

			.xl-checkbox-item-info {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				border-radius: 6rpx;
				margin-right: var(--gap);
				padding: calc(var(--icon-size)/5) calc(var(--icon-size)/3);
				background: transparent;
				
				&.xl-checkbox-icon-disabled{
					.xl-checkbox-icon {
						background: #ebedf0;
					}
					.xl-checkbox-text {
						color: #c8c9cc;
					}
				}
				
				&.xl-checkbox-item-checked{
					.xl-checkbox-icon{
						border: 2rpx solid v-bind(iconColor);
						background: v-bind(iconColor);
						.yes{
							display: block;
						}
					}
					
					&.xl-checkbox-item-bg {
						background: var(--bg-color);
						.xl-checkbox-text {
							color: v-bind(iconColor);
						}
					}
				}

				.xl-checkbox-icon {
					width: var(--icon-size);
					height: var(--icon-size);
					display: flex;
					justify-content: center;
					align-items: center;
					-webkit-transition: 0.25s ease;
					transition: 0.25s ease;
					margin-right: 14rpx;
					box-sizing: border-box;
					border-radius: calc(var(--icon-size)/5);
					border: 2rpx solid #c9c9cc;
					background: #fff;
					.yes{
						display: none;
					}
				}

				.xl-checkbox-text {
					box-sizing: border-box;
					color: v-bind(fontColor);
					flex: 1;
				}
			}
		}
	}
</style>